<html>﻿<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>waterfall demo</title>
<script src="../../../../../../g.tbcdn.cn/kissy/k/1.3.2/seed.js" tppabs="http://g.tbcdn.cn/kissy/k/1.3.2/seed.js" data-config="{combine:true}"></script>
<style>
    .ks-waterfall {
        position: absolute;
        width: 192px;
        overflow: hidden;
        padding: 15px;
        border: 2px solid #ddd;
        margin-bottom: 20px;
        text-align: center;
        left: -9999px;
        top: -9999px;
    }
</style>
<link rel="stylesheet" href="assets/demo.css" tppabs="http://docs.kissyui.com/1.3/source/raw/demo/waterfall/assets/demo.css" type="text/css" media="all"/>
</head>
<body>

<div id="wrapper">
    <div id="button_container"></div>

    <div id="article">
        <div id="ColumnContainer"></div>
        <a id="BackToTop" href="#">Scroll to Top</a>
        <div id="loadingPins"><img src="../../../../../../img03.taobaocdn.com/tps/i3/T1Ar9xXg0JXXXXXXXX-16-16.gif" tppabs="http://img03.taobaocdn.com/tps/i3/T1Ar9xXg0JXXXXXXXX-16-16.gif" alt="Pin Loader Image"/><span>Fetching pins&hellip;</span></div>
    </div>
</div>
<script type="tpl" id="tpl">
    <div class="pin ks-waterfall" data-id="{id}">
        <a href="#" class="image">
            <img height="{height}" alt="{title}" src="http://docs.kissyui.com/farm{farm}.static.flickr.com/{server}/{id}_{secret}_m.jpg//>
        </a>
        <p class="description">{title}</p>
        <p>
            <button class="del">删除</button>
            <button class="grow">增高</button>
        </p>
    </div>
</script>

<script src="assets/effect.js" tppabs="http://docs.kissyui.com/1.3/source/raw/demo/waterfall/assets/effect.js"></script>
</body>
</html>